<template>
  <div>
    <section class="container">
      <!-- 左边导航栏 -->
      <div class="hezi">
        <tab @childByValue="childByValue"></tab>
        <div class="one" type="flex">
          <h2>推荐城市</h2>
        </div>
        <a href="/post#">
          <img
            src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3503143653,3145876408&fm=26&gp=0.jpg"
            alt
          />
        </a>
      </div>

      <!-- 右边 -->
      <div class="sousuo">
        <!-- 搜索框 -->
        <div class="sousuoBox">
          <input
            type="text"
            placeholder="输入你想去的地方，比如：'广州'"
            v-model="chaxun"
            @keyup.enter="enter"
            
          />
          <span class="span" @click="dianji">
            <i class="el-icon-search xiaoshou"></i>
          </span>
        </div>

        <!-- 推荐地段 -->
        <div class="tuijian">
          <span class="beijin">
            推荐：
            <span  v-for="(item,index) in Newtuijian" :key="index" @click="fuzhi(item)" >{{item.name}}</span>
            
          </span>
        </div>
        <div class="gonglue">
          <span>推荐攻略</span>
          <el-row>
            <el-button type="primary" icon="el-icon-edit" @click="yemian">写游记</el-button>
          </el-row>
        </div>
        <post v-for="(item,index) in NEWshuju" :key="index" :post="item" />

        
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[3, 6, 9]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </div>
      

    </section>
  </div>
</template>

<script>
import tab from "@/components/post/tab.vue";
import post from "@/components/post/post.vue";
export default {
  data() {
    return {
      shuju: {},


      NEWshuju:[],
      // 搜索
      chaxun: "",

      Newtuijian:[
        {name:'北京'},
        {name:'上海'},
        {name:'广州'},
      ],


        // 一共有多少条数据
        total: 0,

        pageSize: 3,
        pageIndex: 1
    };
  },
  components: {
    tab,
    post
  },
  mounted() {
    this.$axios({
      url: "/posts"
    }).then(res => {
      const {data} = res.data
      this.shuju = data
      

      console.log('123',this.shuju);
      this.total = data.length
      this.NEWshuju=this.shuju.slice(0,3)
    });
  },
  computed: {},
  methods: {
    // 点击的时候发送ajax请求
    dianji() {
      // 判断是否输入框为空
      if (!this.chaxun) {
        this.$axios({
          url: "/posts"
        }).then(res => {
          this.shuju = res.data.data;

          // console.log('123',this.shuju);
           this.NEWshuju=this.shuju.slice(0,3)
        });
      } else {
        this.$axios({
          url: "/posts",
          params: {
            city: this.chaxun
          }
        }).then(res => {
          this.shuju = res.data.data;
          console.log("传值", this.shuju);
           this.NEWshuju=this.shuju.slice(0,3)
        });
      }
    },

    //回车发送ajax请求
    enter: function(e) {
      var keyCode = window.event ? e.keyCode : e.whith;
      // 判断按下键是否为13 ： enent
      if (keyCode == 13) {
        if (!this.chaxun) {
          this.$axios({
            url: "/posts"
          }).then(res => {
            this.shuju = res.data.data;
            // console.log('123',this.shuju);
             this.NEWshuju=this.shuju.slice(0,3)
          });
        } else {
          this.$axios({
            url: "/posts",
            params: {
              city: this.chaxun
            }
          }).then(res => {
            this.shuju = res.data.data;
            // console.log("传值", this.shuju);
             this.NEWshuju=this.shuju.slice(0,3)
          });
        }
      }
    },

    fuzhi(s){
    
      const {name} = s
      // console.log(name);
      this.chaxun = name
       this.$axios({
          url: "/posts",
          params: {
            city: this.chaxun
          }
        }).then(res => {
          this.shuju = res.data.data;
          console.log("传值", this.shuju);
        });
    },

    childByValue (childValue){
      // console.log(childValue);
      
      this.chaxun = childValue
       this.$axios({
          url: "/posts",
          params: {
            city: this.chaxun
          }
        }).then(res => {
          this.shuju = res.data.data;
          console.log("传值", this.shuju);
        });
    },
    // 跳转到写游记页面
    yemian(){
      this.$router.push('/post/create')
    },
      // 分页切换条数的时候触发
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
         this.pageIndex = val;
        this.NEWshuju=this.shuju.slice((this.pageIndex-1)*this.pageSize,this.pageIndex*this.pageSize)

      },
      // 切换页面数的时候触发
      handleCurrentChange(val) {
        this.pageIndex = val;
        console.log(`当前页: ${val}`);
        this.NEWshuju=this.shuju.slice((this.pageIndex-1)*this.pageSize,this.pageIndex*this.pageSize)
      },
      
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 20px;
}
.hezi {
  margin-top: 20px;
  width: 260px;
  img {
    width: 260px;
    height: 173px;
  }
}
.sousuo {
  margin-top: 20px;

  width: 700px;
  //  margin-top: 100px;
  margin-left: 40px;

  .sousuoBox {
    display: flex;
    justify-content: space-between;
    border: 3px solid orange;
    line-height: 40px;
    .xiaoshou {
      cursor: pointer;
    }
  }

  input {
    flex: 1;
    height: 40px;
    border: 0; // 去除未选中状态边框
    outline: none; // 去除选中状态边框
    margin-left: 20px;
    line-height: 20px;
  }

  i {
    color: orange;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    width: 52px;
  }
}
h2 {
  // padding-left: 10px;
  font-weight: 200;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

// 推荐地段
.tuijian {
  margin: 10px 0;
  font-size: 10px;
}

// 推荐攻略
.gonglue {
  height: 51px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  span {
    font-size: 16px;
    color: orange;
    padding-top: 10px;
    border-bottom: 2px solid orange;
  }
}

.beijin{
  span{
    margin-left: 10px;
    cursor:pointer
  }
}
</style>